<template>
  <el-menu @select="handleSelectLayer" class="j-block-layer" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item :index="index.toString()" style="padding-left: 10px;" v-for="(item,index) in config.layer" :key="index" class="j-layer-tier">
      <div>
        <i class="el-icon-view"></i>
        <span slot="title">{{item.title}}</span>
      </div>
      <div>
        <i class="el-icon-delete" @click="handleDeleteLayer(index)"></i>
      </div>
    </el-menu-item>
  </el-menu>
</template>
<script type="text/javascript">
import { mapState, mapMutations, bootstrap } from 'vuecx'
export default {
  components: {
    //empty
  },
  props: {
    value: [Array, Object]
  },
  data() {
    return {

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState(['config']),
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['delete_layer', 'select_layer']),
    handleDeleteLayer(index) {
        this.$confirm('永久删除该图层，不可恢复, 是否继续?', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ret = this.config.layer.splice(index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleSelectLayer(e, options) {
      let item = this.config.layer[e];
      console.log('图层',item)
      this.select_layer({
        handle: item.handle,
        attribute: item.attribute,
      })
    }
  }
}

</script>
<style type="text/css" lang="scss">
.j-block-layer{
  .j-layer-tier{
    width: 100%;
    display: flex;
    justify-content:space-between;
    align-items:center;
  }
}
</style>
